<template>
	<view class="page">
		<view class="header-line">
			<view class="return-btn" @click="backPage"></view>
			<view class="text">系统通知</view>
		</view>
		<view class="main-content">
			<view class="notification-list">
				<view class="notification-item" v-for="item in notificationList" :key="item.id">
					<view class="notification-icon application"></view>
					<view class="notification-content">
						<view class="notification-title">{{ item.title }}</view>
						<view class="notification-message">{{ item.message }}</view>
						<view class="notification-time">{{ item.time }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			notificationList: [
				{
					id: 1,
					title: '互助申请通过',
					message: '你申请加入的"前端项目结对编程"互助已通过',
					time: '2024-01-21 20:30'
				}, {
					id: 2,
					title: '新消息提醒',
					message: '张同学给你发送了一条消息',
					time: '2024-01-21 18:45'
				}, {
					id: 3,
					title: '系统通知',
					message: '你的简历已获得3次新的浏览',
					time: '2024-01-21 15:20'
				}, {
					id: 4,
					title: '学习提醒',
					message: '今天晚上8点有算法学习小组活动',
					time: '2024-01-21 14:30'
				}
			]
		}
	},
	methods: {
		backPage() {
			uni.navigateBack();
		},
	}
}
</script>

<style>
.main-content {
	padding: 5vmin;
	padding-bottom: 10vmin;
	background-color: #f5f5f5;
}

.notification-list {
    display: flex;
    flex-direction: column;
    gap: 3vmin;
}

.notification-item {
    display: flex;
    gap: 4vmin;
    padding: 3vmin;
    background: #fff;
    border-radius: 3vmin;
    transition: all .2s;
}

.notification-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10vmin;
    height: 10vmin;
    border-radius: 5vmin;
    background: #f5f5f5;
}

.notification-content {
    flex: 1;
}

.notification-title {
    margin-bottom: 1vmin;
    font-size: 4vmin;
    color: #333;
    font-weight: 500;
}

.notification-message {
    margin-bottom: 2vmin;
    font-size: 3.5vmin;
    color: #666;
    line-height: 1.5;
}

.notification-time {
    font-size: 3vmin;
    color: #999;
}
</style>
